<template>
    <div>
	  	<div class="head">
    		<image :src="src" class="headd" @click="show9()" resize="cover"></image>
    		<text class="head1">注册</text>
    		<!-- <text class="head2">手机快捷登录</text> -->
    	</div>
	  	<div class="fiv" v-if="show1">
	  		<div class="fiv1">
	  			<text class="fin">{{item1}}</text>
	  			<div class="fiv1-1" v-if="show4">
	  				<div class="finn"></div>
	  			</div>
	  		</div>
	  		<div class="fiv2">
	  			<text class="fin">{{item2}}</text>
	  			<div class="fiv1-1" v-if="show4">
	  				<div class="finn"></div>
	  			</div>
	  		</div>
	  		<div class="fiv3">
	  			<text class="fin">{{item3}}</text>
	  			<div class="fiv1-1" v-if="show4">
	  				<div class="finn"></div>
	  			</div>
	  		</div>
	  	</div>
	  	<div class="fif" v-if="ttt1">
	  		<div class="fif1">
	  			<image :src="src1" class="fif-img"></image>
	  			<input v-model="phoNum" v-on:input="watcher()" type="text" class="fif2" placeholder="在这里输入手机号哦" />
	  		</div>
	  		<div class="text1">
	  			<text class="text1-1">输入手机号之后，系统将给您发送一条包含验证码的短信</text>
	  		</div>
	  		<div class="button-1">
	  			<div v-bind:style="bgColor" class="bu1" @click="get_security_code()">
	  				<text class="bu1-1">获取验证码</text>
	  			</div>
	  		</div>
	  	</div>
	  	<div class="llp" v-if="ttt2">
	  		<div class="llp1">
	  			<image :src="src2" class="llp1-img"></image>
	  			<input v-on:input="writeShortMsg()" v-model="shortMsg" type="text" class="llp1-inp" placeholder="输入短信验证码" />
				<div @click="dian&&get_security_code()" class="getvrfcAgain">
					<text class="llp1-text">{{second}}</text><text class="llp1-text1">秒后重新获取</text>
				</div>
	  		</div>
	  		<div class="button-1">
	  			<div :style="bgColor1" class="bu1" @click="huoqu2()">
	  				<text class="bu1-1">下一步</text>
	  			</div>
	  		</div>
	  	</div>
	  	<div class="shezhi" v-if="ttt3">
	  		<div class="fif1">
	  			<image :src="src3" class="fif-img"></image>
	  			<input v-on:input="setPass()" v-model="pass" type="text" class="fif2" placeholder="在这里设置你的密码" />
	  		</div>
	  		<div class="text1">
	  			<text class="text1-1">密码组成包含6-12位字符，包含字母和数字</text>
	  		</div>
	  		<div class="button-1">
	  			<div class="bu1"  :style="bgColor2" @click="huoqu3()">
	  				<text class="bu1-1">完成</text>
	  			</div>
	  		</div>
	  		<div class="shezhi-xieyi">
	  			<text class="xieyiyi1">说明：登录代表您已同意车e家</text>
	  			<text @click="xieyi()" class="xieyiyi">《用户协议》</text>
	  		</div>
	  	</div>
    </div>
</template>
<style scoped>
	.getvrfcAgain{
		flex-direction: row;
		/*align-items: center;*/
	}
	.head{
    	width: 100%;
    	height: 32px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	margin-top: 17px;
    	position: fixed;
    	box-shadow: 1px 1px 1px #ccc;
    	position: relative;
    }
	.img{
		background-image: url(http://192.168.2.123:8080/img/index_text.png);
		width: 15px;
		height: 20px;
		background-size: cover;
	}
	.headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	position: fixed;
    	left: 12px;
    }
	.head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 16px;
    	color: #666;
    	bottom: 3px;
    }
    .head1{
    	font-size: 20px;
    }
	.fiv{
		width: 100%;
		height: 30px;
		/*background-color: pink;*/
		margin-top: 34px;
		flex-direction: row;
		justify-content: space-around;
	}
	.fiv1-1{
		width: 100%;
		height: 6px;
		/*background-color: #33c179;*/
		margin-top: 12px;
		border-radius: 8px;
		justify-content: center;
		align-items: center;
	}
	.finn{
		width: 55px;
		height: 6px;
		background-color: #33c179;
		border-radius: 8px;
	}
	.fif{
		margin-top: 83px;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
	.fif1{
		width: 300px;
		height: 41px;
		/*background-color: pink;*/
		box-sizing: border-box;
		flex-direction: row;
		border-bottom: solid 1px #999;
	}
	.fif2{
		width: 200px;
		margin-left: 21px;
		border: 0;
		outline: none;
		height: 30px;
	}
	.fif-img{
		width: 20px;
		height: 30px;
		/*background-color: #33c179;*/
		margin-left: 23px;
	}
	.text1{
		width: 100%;
		height: 12px;
		/*background-color: pink;*/
		margin-top: 13px;
		justify-content: center;
		align-items: center;
	}
	.text1-1{
		text-align: center;
		color: #33c179;
		font-size: 12px;
	}
	.button-1{
		width: 100%;
		height: 37px;
		/*background-color: pink;*/
		margin-top: 46px;
		align-items: center;
		justify-content: center;
	}
	.bu1{
		width: 160px;
		height: 37px;
		background-color: #999;
		border-radius: 30px;
		line-height: 37px;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
	.bu1-1{
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}
	.fin{
		font-size: 14px;
	}
	/*输入验证码模块*/
	.llp{
		margin-top: 83px;
		width: 100%;
		align-items: center;
		justify-content: center; 
	}
	.llp1{
		width: 300px;
		height: 41px;
		/*background-color: pink;*/
		box-sizing: border-box;
		flex-direction: row;
		border-bottom: solid 1px #999;
	}
	.llp1-img{
		width: 23px;
		height: 32px;
		/*background-color: #33c179;*/
		margin-left: 23px;
	}
	.llp1-inp{
		width: 120px;
		margin-left: 20px;
		border: 0;
		outline: none;
		height: 30px;
	}
	.llp1-text{
		color: #33c179;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	.llp1-text1{
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	/*设置密码*/
	.shezhi{
		margin-top: 83px;
		width: 100%;
		align-items: center;
		justify-content: center; 
	}
	.shezhi-xieyi{
		width: 100%;
		height: 12px;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top: 20px;
		flex-direction: row;
	}
	.xieyiyi{
		color: #33c179;
		font-size: 12px;
	}
	.xieyiyi1{
		font-size: 12px;
	}
</style>
<script>
    var stream = weex.requireModule('stream');
    export default{
    data(){
        return{
           show1:true,
           show2:true,
           show3:true,
           show4:true,
           ttt1: true,
           ttt2: false,
           ttt3: false,
           src: 'http://192.168.2.123:8080/img/index_back.png',
           title: '注册',
           item1: '输入手机号',
           item2: '输入验证码',
           item3: '设置密码',
           src1: 'http://192.168.2.123:8080/img/login-phone-black.png',
           src2: '',
           src3: '',
            phoNum:"",
			bgColor:"background:#999",
            bgColor1:"background:#999",
            bgColor2:"background:#999",
            shortMsg:'',
            pass:"",
			second:60,
            dian:false,
			hash:'',
			tamp:''
        }   
    },
    methods: {

		// 监听密码格式判断颜色
        setPass(){
            let re2=/^\S{8,16}$/;
            if(re2.test(this.pass)){
              this.bgColor2="background:#33c179";
			}else{
                this.bgColor2="background:#999";
			}
		},
		// 监听短信验证码判断颜色
        writeShortMsg(){
            let re1=/^[0-9]{6}$/;
            if(re1.test(this.shortMsg)){
                this.bgColor1="background:#33c179";
			}else{
                this.bgColor1="background:#999";
			}
		},
		// 监听手机号码格式判断颜色
        watcher(){
            let re=/^1[0-9]{10}$/;
            if(re.test(this.phoNum)){
                this.bgColor="background:#33c179";
			}else{
                this.bgColor="background:#999";
			}
		},
		// 验证码验证（下一步点击事件）
    	huoqu2(){
            let re1=/^[0-9]{6}$/;
            if(re1.test(this.shortMsg)){
                // 发出fetch请求
                stream.fetch({
                    method: 'POST',
                    url: "http://1.194.233.171:8081/api/dept/validateNum",
                    type: 'json',
                    body:`{
                   "msgNum":${JSON.stringify(this.shortMsg)},
					 "hash":${JSON.stringify(this.hash)},
  					 "tamp":${JSON.stringify(this.tamp)}
                    }`,
                    headers:{
                        'Content-Type':'application/json'
                    },
                    mode:"cors"
                },(ret)=>{
                    if (!ret.ok) {
                        console.log(ret)
                        alert("请检查手机号码！")
                    } else {
                        console.log(ret);
                        console.log(ret.data.data);
                        // 响应成功进入下一环节
						if(ret.data.status==1){
						    // console.log(1)
                            this.ttt2 = false;
                            this.ttt3 = true;
						}else{
						    // 不成功弹框
						    alert("验证码错误")
						}
                    }
                }, function (response) {
                    console.log(response);
                });

			}else{
                alert("验证码不对哦")
			}
    		console.log(2);
    	},
		// 账号创建完成点击
    	huoqu3(){
            let re2=/^\S{8,16}$/;
			if(re2.test(this.pass)){
                // 发出fetch请求
                stream.fetch({
                    method: 'POST',
                    url: "http://192.168.2.140:8081/api/dept/register",
                    type: 'json',
                    body:`{"phone":${JSON.stringify(this.phoNum)},"password":${JSON.stringify(this.pass)}}`,
                    headers:{
                        'Content-Type':'application/json'
                    },
                    mode:"cors"
                }, function (ret) {
                    if (!ret.ok) {
                        alert("手机号或密码不正确！")
                        console.log(ret)
                    } else {
                        console.log(ret);

                        // 获取当前商户注册成功，用户id值传入local Storage
                        let userID=ret.data.data.id;
                        // console.log(inpValue1)
                        const info1 = {
                            idCode: userID,
                        };
                        localStorage.setItem('userid', JSON.stringify(info1));

                        // 跳转店铺创建页面
                      	location.href="#/create_shop"
                    }
                }, function (response) {
                    console.log(response);
                });
			}
    	},
    	show9(){
           	this.$router.back(-1);
        },
        // 获取验证码
        get_security_code(){
            this.dian=false;
            let re=/^1[0-9]{10}$/;
    		if(re.test(this.phoNum)){
                // 发出fetch请求
                stream.fetch({
                    method: 'POST',
                    url: "http://192.168.2.140:8081/api/dept/registerAccount",
                    type: 'json',
                    body:`{"phoneNumber":${JSON.stringify(this.phoNum)}}`,
                    headers:{
                        'Content-Type':'application/json'
                    },
                    mode:"cors"
                },(ret)=>{
                    if (!ret.ok) {
                        console.log(ret)
                        alert("请检查手机号码！")
                    } else {
                        console.log(ret);
                        this.hash=ret.data.data.hash;
                        this.tamp=ret.data.data.tamp;
						// 响应成功进入下一环节
                        this.ttt1 = false;
                        this.ttt2 = true;
                        let timer = setInterval(()=>{
                            this.second--;
                            if(this.second==0){
                                this.second=60;
                                this.dian=true;
                                clearInterval(timer)
                            }
                        },1000);
                    }
                }, function (response) {
                    console.log(response);
                });

			}else{
                alert("手机号码不对哦");
            }
        }
    }
}
</script>




